<script setup lang="ts">
defineOptions({
  name: "system-role"
});
import { deleteRole, getRoleList } from "@/api/modules/system";
import { DEFAULT_PAGINATION } from "@/common/init";
import { message } from "@/utils/message";
import { PaginationProps } from "@pureadmin/table";
import { cloneDeep, debounce } from "@pureadmin/utils";
import { ElMessageBox } from "element-plus";
import { PlusSearch } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import { onMounted, reactive, ref } from "vue";
import { fromColumns, tableColumns } from "./data";
import CreateFrom from "./modules/create-from.vue";
import EditFrom from "./modules/edit-from.vue";
import MenuAssign from "./modules/menu-assign.vue";
import PermissionAssign from "./modules/permission-assign.vue";

const state = ref({
  name: "",
  code: "",
  status: ""
});

const dataList = ref([] as any);
const editVisible = ref(false);
const menuAssignVisible = ref(false);
const permissionAssignVisible = ref(false);
const currentRow = ref(null);

/** 分页配置 */
const pagination = reactive<PaginationProps>({
  ...DEFAULT_PAGINATION
});

function onSizeChange(val) {
  pagination.pageSize = val;
  loadData({
    pageSize: pagination.pageSize,
    current: pagination.currentPage
  });
}

function onCurrentChange(val) {
  pagination.currentPage = val;
  loadData({ pageSize: pagination.pageSize, current: val });
}

async function loadData(param?: any) {
  const fromValues = cloneDeep(state.value);
  if (param) {
    await getRoleList({ ...param, ...fromValues }).then(res => {
      dataList.value = res.data.records;
      pagination.total = res.data.total;
    });
  } else {
    await getRoleList({
      pageSize: pagination.pageSize,
      current: pagination.currentPage,
      ...fromValues
    }).then(res => {
      dataList.value = res.data.records;
      pagination.total = res.data.total;
    });
  }
}

const handleSearch = (values: any) => {
  loadData({
    pageSize: pagination.defaultPageSize,
    current: pagination.defaultCurrentPage,
    ...values
  });
};

const debounceSearch = debounce(handleSearch, 500);

const handleRest = () => {
  pagination.currentPage = pagination.defaultCurrentPage;
  pagination.pageSize = pagination.defaultPageSize;
  loadData();
};

const handleRefresh = () => {
  loadData();
};

onMounted(() => {
  loadData({ pageSize: pagination.pageSize, current: pagination.currentPage });
});

const handleEdit = row => {
  currentRow.value = row;
  editVisible.value = true;
};

const handleDelete = (id: string) => {
  ElMessageBox.confirm("确定删除该角色吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteRole(id).then(() => {
      message("删除成功", { type: "success" });
      handleRefresh();
    });
  });
};

const handleMenuAssign = row => {
  menuAssignVisible.value = true;
  currentRow.value = row;
};

const handlePermissionAssign = row => {
  permissionAssignVisible.value = true;
  currentRow.value = row;
};
</script>

<template>
  <div id="table-container">
    <el-card shadow="never" class="mb-5">
      <PlusSearch
        v-model="state"
        :columns="fromColumns"
        :show-number="2"
        label-width="100"
        label-position="right"
        @search="handleSearch"
        @reset="handleRest"
        @change="debounceSearch"
      />
    </el-card>

    <el-card shadow="never">
      <template #header>
        <div class="w-full flex justify-between">
          <span>角色列表</span>
          <span class="flex justify-end">
            <CreateFrom @refresh="handleRest" />
          </span>
        </div>
      </template>
      <pure-table
        row-key="id"
        showOverflowTooltip
        adaptive
        alignWhole="center"
        table-layout="auto"
        :data="dataList"
        :columns="tableColumns"
        :pagination="pagination"
        @page-size-change="onSizeChange"
        @page-current-change="onCurrentChange"
      >
        <template #status="{ row }">
          <el-tag v-if="row.status == 0" type="danger"> 已禁用 </el-tag>
          <el-tag v-else type="success"> 正常 </el-tag>
        </template>
        <template #operate="{ row }">
          <div class="flex justify-start">
            <el-button type="primary" link @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="primary" link @click="handleMenuAssign(row)">
              分配菜单
            </el-button>
            <el-button type="primary" link @click="handlePermissionAssign(row)">
              分配权限
            </el-button>
            <el-button type="danger" link @click="() => handleDelete(row.id)">
              删除
            </el-button>
          </div>
        </template>
      </pure-table>
    </el-card>
    <EditFrom
      v-model:visible="editVisible"
      :row="currentRow"
      @refresh="handleRefresh"
    />
    <MenuAssign
      v-if="menuAssignVisible"
      :role-info="currentRow"
      :visible="menuAssignVisible"
      @close="() => (menuAssignVisible = false)"
    />
    <PermissionAssign
      v-if="permissionAssignVisible"
      :role-info="currentRow"
      :visible="permissionAssignVisible"
      @close="() => (permissionAssignVisible = false)"
    />
  </div>
</template>
